<template>
	 <el-row class="warp">
		<el-col :span="24" class="warp-breadcrum" style="margin-bottom:20px">
			<el-breadcrumb separator="/">
		        <el-breadcrumb-item ><b>首页</b></el-breadcrumb-item>
		        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
		    </el-breadcrumb>
	     </el-col> 
	    <el-col :span='24' >
	    	<el-form :inline="true" :model='filters'><!--:inline="true"这个是再一样的意思是让里面的元素都float 排列-->
	    		<el-form-item>
	    			<el-input placeholder='姓名' style='width:240px' v-model='filters.name'></el-input>
	    		</el-form-item>
	    		<el-form-item>
	    			<el-input placeholder='地址' style='width:240px' v-model='filters.addr'></el-input>
	    		</el-form-item>
	    		<el-form-item style='float:right'>
	    			<el-button type='primary' @click='getUser' >查询</el-button>
	    		</el-form-item>
	    	</el-form>
	    </el-col>
		<el-table :data="tableData" highlight-current-row   v-loading='loading'>
			<el-table-column prop="birth" label="日期" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<el-table-column prop="addr" label="地址"></el-table-column>
		</el-table>
		
		
	</el-row>
</template>

<script>
	import { reqGetUserList } from '../../api/api'
	
	export default {
		data() {
			return {
				filters:{
					name:'',
					addr:''
				},
				loading:false,
				tableData:[]
			}
		},
		methods:{
			//获取列表
			getUser:function(){
				this.loading = true;
				let para ={
					name :this.filters.name,
					addr :this.filters.addr
				}
				reqGetUserList(para).then((res) => {
					this.tableData = res.data.users;
					this.loading = false;
				})
			}
		},
		mounted(){
			this.getUser();
		}
	}
</script>
<style>

</style>